<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col class="fixedTableOne" :span="isDeptTreeVisible ? 3 : 1" :xs="24">
        <!--按钮-->
        <el-button class="dept-col" :style="deptColStyle" type="primary" @click="toggleDeptTreeVisibility">
          {{ isDeptTreeVisible ? '<< 组织机构列表' : '>>' }}
        </el-button>
        <br><br>
        <el-table
          slot="empty"
          height="610"></el-table>
        <div class="head-container" v-if="isDeptTreeVisible">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
            :render-content="renderContent"
          />
        </div>
      </el-col>

      <!-- 课题汇总表数据 -->
      <el-col :span="mainContentSpan" :xs="24">
        <!-- 顶部搜索 -->
        <el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch" label-width="120px">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="年份:" prop="nf">
                <el-select v-model="queryParams.nf" placeholder="请选择年份" clearable>
                  <el-option
                    v-for="dict in dict.type.year"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目名称:" prop="xmName">
                <el-input v-model="queryParams.xmName" placeholder="请输入项目名称" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目编号:" prop="xmBh">
                <el-input v-model="queryParams.xmBh" placeholder="请输入项目编号" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 表格 -->
        <el-table :data="kthzList" height="600" class="fixedTableOne"
                  :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold',fontSize: '12px'}">
          <el-table-column label="序号" align="center" type="index" :index="indexMethod"/>
          <el-table-column show-overflow-tooltip label="项目名称" align="center" prop="xmName"/>
          <el-table-column show-overflow-tooltip label="项目编号" align="center" prop="xmBh"/>
          <el-table-column show-overflow-tooltip label="项目类型" align="center" prop="xmLx"/>
          <el-table-column show-overflow-tooltip label="载账金额(元)" align="center" prop="zzJe"/>
          <el-table-column show-overflow-tooltip label="其中人工费(元)" align="center" prop="qzRgf"/>
          <el-table-column show-overflow-tooltip label="研发人员(数)" align="center" prop="yfRyS"/>
          <el-table-column show-overflow-tooltip label="1月" align="center" prop="month1"/>
          <el-table-column show-overflow-tooltip label="2月" align="center" prop="month2"/>
          <el-table-column show-overflow-tooltip label="3月" align="center" prop="month3"/>
          <el-table-column show-overflow-tooltip label="4月" align="center" prop="month4"/>
          <el-table-column show-overflow-tooltip label="5月" align="center" prop="month5"/>
          <el-table-column show-overflow-tooltip label="6月" align="center" prop="month6"/>
          <el-table-column show-overflow-tooltip label="7月" align="center" prop="month7"/>
          <el-table-column show-overflow-tooltip label="8月" align="center" prop="month8"/>
          <el-table-column show-overflow-tooltip label="9月" align="center" prop="month9"/>
          <el-table-column show-overflow-tooltip label="10月" align="center" prop="month10"/>
          <el-table-column show-overflow-tooltip label="11月" align="center" prop="month11"/>
          <el-table-column show-overflow-tooltip label="12月" align="center" prop="month12"/>
        </el-table>

        <!-- 分页组件 -->
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>

    </el-row>
  </div>
</template>

<script>
import {selectKthz} from "@/api/fztz/kthz";
import {deptTreeSelect} from "@/api/system/user";

export default {
  name: "KtHzb",
  dicts: ['year'],
  data() {
    return {
      deptColStyle: {
        width: '100%',
        marginBottom: '10px',
        backgroundColor: '#ff0000',
        height: 'auto' // 初始状态下，假设组织机构列表是展开的
      },
      mainContentSpan: 21, // 默认情况下主内容区域占据21个栅格
      isDeptTreeVisible: true, // 控制树形结构是否显示，默认显示
      // 表单参数
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 部门树选项
      deptOptions: null,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        xmDeptId: 115,
        nf: new Date().getFullYear().toString(),
        xmName: null,
        xmBh: null
      },
      // 显示搜索条件
      showSearch: true,
      kthzList: [], //课题汇总表格

    }
  },
  created() {
    this.getDeptTree();
    this.updateDeptColStyle(); // 确保初始化时样式正确
  },
  methods: {
    toggleDeptTreeVisibility() {
      this.isDeptTreeVisible = !this.isDeptTreeVisible;
      // 根据 isDeptTreeVisible 的状态来设置 mainContentSpan 和 部门数据的 span
      if (this.isDeptTreeVisible) {
        this.mainContentSpan = 21; // 展开时，主内容区占21个栅格
      } else {
        this.mainContentSpan = 23; // 收起时，主内容区占23个栅格，留出1个栅格给部门数据
      }
      // 更新deptColStyle
      this.updateDeptColStyle();
    },
    updateDeptColStyle() {
      this.deptColStyle = {
        width: '100%',
        marginBottom: '10px',
        color: '#000',
        backgroundColor: '#E9EDF1',
        height: this.isDeptTreeVisible ? 'auto' : '100vh'
      };
    },
    /** 自定义序号 */
    indexMethod(index) {
      let pageNum = this.queryParams.pageNum - 1;
      if ((pageNum !== -1 && pageNum !== 0)) {
        return (index + 1) + (pageNum * this.queryParams.pageSize);
      } else {
        return (index + 1)
      }
    },
    clickFirstNode() {
      this.$nextTick(() => {
        // const firstNode = this.$refs.tree.store.nodesMap['101']; // 默认点击系统开发的节点
        const firstNode = this.$refs.tree.store.nodesMap['115']; // 默认点击机电制造安装公司的节点
        if (firstNode) {
          this.$refs.tree.setCurrentKey(firstNode.key);
          this.handleNodeClick(firstNode.data);
        }
      });
    },
    // 节点单击事件
    handleNodeClick(data) {
      console.log(data)
      this.queryParams.xmDeptId = data.id;
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList() {
      // 打开遮罩层
      this.$modal.loading("正在获取数据，请稍后...");
      selectKthz(this.queryParams).then(res => {
        this.kthzList = res.rows
        this.total = res.total;
        // 关闭遮罩层
        this.$modal.closeLoading();
      })
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = this.extractFirstTwoLevels(response.data);
        this.clickFirstNode()
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },


  }
}
</script>

<style scoped>
/deep/ .el-tree-node__content {
  font-size: 14px;
}

/* 去除按钮的默认外边框 */
.dept-col {
  border: none; /* 移除外边框 */
  outline: none; /* 移除点击时的轮廓线 */
  padding: 5px; /* 可以根据需要调整内边距 */
  text-align: center; /* 文字居中 */
  cursor: pointer; /* 更改鼠标指针形状为手指，表示这是一个可点击的元素 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
  display: flex; /* 使用flex布局 */
  align-items: flex-start; /* 文字顶部对齐 */
  justify-content: center; /* 水平居中文本 */
}

/* 当按钮被点击（即部门树被隐藏）时的高度自适应 */
/deep/ .dept-col[aria-expanded="false"] {
  height: auto; /* 高度自适应 */
}

/* 使树节点内容的字体大小为14px */
/deep/ .el-tree-node__content {
  font-size: 14px;
}
</style>

